<template>
    <el-dialog v-model="visible" title="自定义标签" :close-on-click-modal="false" :close-on-press-escape="false">
        <el-form ref="vForm" :inline="true" :model="state.dataForm" @keyup.enter="state.getDataList()"
            label-width="85px">
            <el-table
                :header-cell-style="{ 'background': '#eef1f6', 'color': '#1f2d3d', 'border-color': '#dfe6ec', 'whiteSpace': 'nowrap', }"
                border v-loading="state.dataListLoading" :data="state.dataList" style="width: 100%;margin-top: 15px;">
                <el-table-column align="center" prop="tag" label="标签类别"></el-table-column>
                <el-table-column align="center" label="标签分类">
                    <template v-slot="scope">
                        <el-checkbox-group v-model="state.dataForm.tagIdList" @change="changeAtagid">
                            <el-checkbox 
                            v-for="leader in scope.row.children" 
                            :key="leader.id"
                            :label="leader.id"
                            :value="leader.id">
                            {{ leader.tag }}
                            </el-checkbox>
                        </el-checkbox-group>
                    </template>
                </el-table-column>
            </el-table>
        </el-form>
        <template v-slot:footer>
            <el-button type="primary" @click="dataFormSubmitHandle()">确定</el-button>
            <el-button @click="dataFormClose()">关闭</el-button>
        </template>
    </el-dialog>
</template>

<script lang="ts" setup>
import useView from "@/hooks/useView";
import { reactive, ref, toRefs,} from "vue";
import baseService from "@/service/baseService";
import { ElMessage } from "element-plus";

const emit = defineEmits(["refreshDataList"]);

const visible = ref(false);
const dataFormRef = ref();
const props = defineProps({
  psnIdList: Object
})
const view = reactive({
    getDataListURL: '/crm/crmbasetag/getByUserIdList',
    dataForm: {
        id: "",
        tag: '',
        tagIdList: [] as number[],
        psnIdList:[] as string[],  
    }
});
const changeAtagid = (value:any) => {
    console.log(value);
}
const init = (id:any,data:any,) => {
    visible.value = true;
    state.dataForm.id = '';
    state.dataForm.psnIdList=data
    // 重置表单数据
    if (dataFormRef.value) {
        dataFormRef.value.resetFields();
    }
};

//关闭
const dataFormClose= () => {
    state.dataForm.tagIdList = state.dataForm.tagIdList.map((item: number) => Number(item)); // 转换tagIdList中的字符串为数字
  return baseService.delete("/crm/crmobjectsort/batchDelete",state.dataForm).then((res) => {
    if (res.code == 0) {
        visible.value = false;
        emit("refreshDataList");
      return ElMessage.success("删除成功");
    }
  });
};

//表单提交按钮
 const dataFormSubmitHandle= () => {
    state.dataForm.tagIdList = state.dataForm.tagIdList.map((item: number) => Number(item)); // 转换tagIdList中的字符串为数字
  return baseService.post("/crm/crmobjectsort/batchSave",state.dataForm).then((res) => {
    if (res.code == 0) {
        visible.value = false;
        emit("refreshDataList");
      return ElMessage.success("确定成功");
    }
  });
};

const state = reactive({ ...useView(view), ...toRefs(view) });

defineExpose({
    init
});
</script>
